<template>
  <header v-if="windowMode === 'PC'" class="header">
    <router-link to="/"><img src="images/logo.png" alt="" class="logo" /></router-link>
    <div class="menuBar">
      <router-link :to="{path:'/guide'}">新手攻略</router-link>
      <router-link :to="{path:'/equipment'}">装备提升</router-link>
      <router-link :to="{path:'/treasure'}">资产获取</router-link>
      <router-link :to="{path:'/graphic'}">画质优化</router-link>
      <router-link :to="{path:'/sponsor'}">提供赞助</router-link>
    </div>
  </header>
  <header v-else class="MBHeader">
    <div class="topContainer">
      <router-link to="/"><img src="images/logo.png" alt="" class="logo" /></router-link>
    </div>
    <div class="menuBar">
      <router-link :to="{path:'/guide'}">新手攻略</router-link>
      <router-link :to="{path:'/equipment'}">装备提升</router-link>
      <router-link :to="{path:'/treasure'}">资产获取</router-link>
      <router-link :to="{path:'/graphic'}">画质优化</router-link>
      <router-link :to="{path:'/sponsor'}">提供赞助</router-link>
    </div>
  </header>
</template>

<script>
export default {
  name: 'header.vue',
  data() {
    return {
      currentLang: true,
      windowMode: 'PC'
    }
  },
  created() {
    this.resize()
  },
  mounted() {
    window.onresize = () => {
      this.resize()
    }
  },
  methods: {
    resize() {
      let width = window.innerWidth
      if (width > 999) {
        this.windowMode = 'PC'
      } else {
        this.windowMode = 'MB'
      }
    },
  }
}
</script>

<style scoped></style>
